<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: #bfa;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top:0;
            bottom:0;
            left: 0;
            right: 0;
            margin-top: auto;
            margin-bottom: auto;
            margin-left: auto;
            margin-right: auto;
            
        }

        /* 
            水平布局
               多个定位的left和right二个值
            left+margin-left-padding-left+border-left+width+margin-right+padding-right+border-right+right=包含块的内容区的宽度
            -当我们开启绝对定位后:
                水平方向的布局等式就需要添加left和right二个值
                此时规则和之前一样知识多添加了二个值,
                    当发生过度约束,
                        如果九个值中没有auto则自动调整right值以使等式成立
                        如果有auto,则自动调整auto的值以使等式满足


                -可设置auto的值
                    margin width left right

                -因为left和right的值默认是auto,所以如果不知道left和right
                    则等式不满足时,会自动调整这二个值

                垂直方向布局的等式的也必须满足
                    top+margain-top+padding-top + border-top + height +margin-bottom + padding-bottom + border-bottom=
        */
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>